vlwkaos' digital garden

CSS 양옆이 변경되더라도 가운데 고정

  • flex를 총 4개 사용한다.
  • 각 컨테이너가 중앙 배치되면서 똑같은 공간을 나눠 갖도록 한다.
  • 각 양 끝 내용물 위치를 변경
<header>
    <div></div>
    <div></div>
    <div></div>
</header>
  header {
    position: relative;
    display: flex;
    align-items: center;
    padding: 5px;
  }
  
  header > div {
    display: flex;
    flex:1;
    justify-content: center;
  }
  
  header > div:first-child {
   justify-content: flex-start;
  }

  header > div:last-child {
   justify-content: flex-end;
  }

CSS 양옆이 변경되더라도 가운데 고정